<template>
    <el-form :model="feedback" :rules="rules" ref="BookFormRef">
        <el-row>
            <el-col :span="12">
                <el-form-item label="问题一：您目前是否在使用商品管理系统？" prop="question01">
                </el-form-item>
                <el-radio-group v-model="feedback.question01">
                    <el-radio :value="1">是</el-radio>
                    <el-radio :value="0">否（请跳转到问题六）</el-radio>
                </el-radio-group>
                <el-form-item label="问题二：您通常通过什么方式访问商品管理系统？（多选）" prop="question02">
                </el-form-item>
                <el-checkbox-group v-model="feedback.question02">
                    <el-checkbox label="电脑网页端" value="A" />
                    <el-checkbox label="手机APP" value="B" />
                    <el-checkbox label="平板电脑" value="C" />
                    <el-checkbox label="其他" value="D" />
                </el-checkbox-group>
                <el-form-item label="问题三：您对目前使用的商品管理系统的满意度如何？" prop="question03" />
                <el-radio-group v-model="feedback.question03">
                    <el-radio :value="'A'">非常满意</el-radio>
                    <el-radio :value="'B'">满意</el-radio>
                    <el-radio :value="'C'">一般</el-radio>
                    <el-radio :value="'D'">不满意</el-radio>
                    <el-radio :value="'E'">非常不满意（请跳转至问题五）</el-radio>
                </el-radio-group>
                <el-form-item label="问题四：您认为商品管理系统最吸引您的功能是什么？（多选）" prop="question04">
                </el-form-item>
                <el-checkbox-group v-model="feedback.question04">
                    <el-checkbox label="商品购买" value="A" />
                    <el-checkbox label="商品搜索与查询" value="B" />
                    <el-checkbox label="个人信息管理" value="C" />
                    <el-checkbox label="商品推荐" value="D" />
                    <el-checkbox label="其他" value="E" />
                </el-checkbox-group>
                <el-form-item label="问题五：如果您对商品管理系统不满意，主要原因是什么？（多选）" prop="question05">
                </el-form-item>
                <el-checkbox-group v-model="feedback.question05">
                    <el-checkbox label="操作复杂" value="A" />
                    <el-checkbox label="响应速度慢" value="B" />
                    <el-checkbox label="功能不全" value="C" />
                    <el-checkbox label="用户界面不友好" value="D" />
                    <el-checkbox label="系统经常出错" value="E" />
                    <el-checkbox label="其他" value="F" />
                </el-checkbox-group>
            </el-col>
            <el-col :span="12">
                <el-form-item label="问题六：如果您目前没有使用商品管理系统，您认为以下哪些功能会吸引您使用？（多选）" prop="question06">
                </el-form-item>
                <el-checkbox-group v-model="feedback.question06">
                    <el-checkbox label="商品购买" value="A" />
                    <el-checkbox label="商品搜索与查询" value="B" />
                    <el-checkbox label="个人信息管理" value="C" />
                    <el-checkbox label="商品推荐" value="D" />
                    <el-checkbox label="其他" value="E" />
                </el-checkbox-group>
                <el-form-item label="问题七：您通常使用哪种方式购买商品？（多选）" prop="question07">
                </el-form-item>
                <el-checkbox-group v-model="feedback.question07">
                    <el-checkbox label="实体店购买" value="A" />
                    <el-checkbox label="使用第三方商品推荐平台" value="C" />
                    <el-checkbox label="其他" value="E" />
                </el-checkbox-group>
                <el-form-item label="问题八：您希望商品管理系统提供哪些额外的功能或服务？（开放回答）" prop="question08">
                </el-form-item>
                <el-input v-model="feedback.question08" type="textarea" :rows="4" style="width: 60%;" />
                <el-form-item label="问题九：您通常如何得知商品管理系统的更新或新功能？（多选）" prop="question09">
                </el-form-item>
                <el-checkbox-group v-model="feedback.question09">
                    <el-checkbox label="公告" value="A" />
                    <el-checkbox label="电子邮件通知" value="B" />
                    <el-checkbox label="手机APP推送" value="C" />
                    <el-checkbox label="社交媒体" value="D" />
                    <el-checkbox label="其他" value="E" />
                </el-checkbox-group>
            </el-col>

        </el-row>
    </el-form>
    <div style="margin: 20px auto;width: 200px;">
        <el-button type="primary" @click="submitForm(BookFormRef)">提 交</el-button>
        <el-button @click="resetForm(BookFormRef)">重 置</el-button>
    </div>
</template>

<script lang="ts" setup>
import { sbmitfeedbackApi } from '@/api/common';
import { ElMessage, FormInstance, FormRules } from 'element-plus';
import { ref } from 'vue'
const feedback = ref({
    question01: '',
    question02: [],
    question03: '',
    question04: [],
    question05: [],
    question06: [],
    question07: [],
    question08: '',
    question09: [],
})
const BookFormRef = ref<FormInstance>();
const rules: FormRules = {
    question01: [
        { required: true, message: '请选择问题一！', trigger: 'change' },
    ],
    question06: [
        { required: true, message: '请选择问题六！', trigger: 'change' },
    ],
    question07: [
        { required: true, message: '请选择问题七!', trigger: 'change' },
    ],
    question08: [
        { required: true, message: '请填写问题八!', trigger: 'change' },
    ],
    question09: [
        { required: true, message: '请选择问题九!', trigger: 'change' },
    ],

}
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            sbmitfeedbackApi(feedback.value).then(res => {
                if (res.data.code == 200) {
                    ElMessage({
                        type: 'success',
                        message: '提交成功！',
                    })
                    resetForm(formEl);
                } else {
                    ElMessage({
                        type: 'error',
                        message: '提交失败！',
                    })
                }
            }).catch(err => {
                ElMessage.error("服务器错误！")
            })
        }
    })
}
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>

<style></style>